<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
  v-html- 模板的陷阱
双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令
<p>Using text interpolation: {{rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

安全警告
在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。
请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容.

 -->
    <div id="app">
        {{rawHtml}}
        <span v-html="rawHtml"></span>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    rawHtml: '<h1>hello world</h1>'
                }
            }
        }
        var app = Vue.createApp(obj).
        mount('#app')
    </script>
</body>

</html>